<template>
  <!-- 终止申购-->
  <a-modal :width="1000" v-model:visible="showStopDialog" title="终止申购" title-align="start" :mask-closable="false" @cancel="closedDialog" :on-before-ok="submitAudit">
    <p>请再次确认是否对以下产品终止申购，一旦终止，还未入库的货将无法操作入库。该申购单将进入已完成状态。</p>
    <ul class="bill-item-w">
      <li class="flex-c-sb" v-for="(item, i) in list" :key="i">
        <div class="flex-c">
          <ImgPopover :src="item.productImg">
            <template #con>
              <a-image width="70" height="70" fit="contain" :src="item.productImg" />
            </template>
          </ImgPopover>
          <div class="sku-info">
            <div class="flex-c">
              <span class="highlight cursor" @click="toDetailItem(item)">{{ item.sku }}</span>
              <CopyText class="popup-edit-icon-hover" style="margin-left: 5px" :val="item.sku" />
            </div>
            <p>{{ getProductSpecs(item) }}</p>
            <span class="urgent" v-show="item.urgent">急</span>
          </div>
          <div class="prop-item" v-if="item.purchaseSpecsArr && item.purchaseSpecsArr.length">
            <PurchasePropPopover :purchaseSpecsArr="item.purchaseSpecsArr" />
          </div>
        </div>
        <div class="bill-item">
          <p>申购数量：{{ item.planAmt }}</p>
          <p>已入库数：{{ item.warehouseAmt }}</p>
          <p>未入库数：{{ item.warehouseStayAmt }}</p>
        </div>
      </li>
    </ul>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { purchasePlanItemCutoff } from '@/api/purchaseApplication'
  import { parseJson } from '@/utils'
  import PurchasePropPopover from './purchasePropPopover.vue'

  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => [],
    },
  })

  const showStopDialog = ref(props.isShow)
  // 显示sku规格
  function getProductSpecs(item: any) {
    let productSpecs = item.productSpecs ? parseJson(item.productSpecs, []) : []
    return productSpecs.map((el: any) => el.valueCn)?.join('*') || '--'
  }
  // 确认
  async function submitAudit() {
    const res: any = await purchasePlanItemCutoff({
      ids: props.list.map((item: any) => item.id),
    })
    if (!res) return false
    Message.success('终止成功')
    emit('success')
    emit('closed')
    return true
  }
  // 关闭
  function closedDialog() {
    showStopDialog.value = false
    emit('closed')
  }
</script>
<style lang="less" scoped>
  .bill-item-w {
    background: #f1f1f1;
    margin-top: 10px;
  }
  li {
    padding: 5px 20px;
    border-bottom: 1px dashed #ddd;
    position: relative;
    font-size: 12px;
    &:last-child {
      border-bottom: none;
    }
    .arco-image {
      margin-right: 5px;
    }
    .sku-info {
      width: 300px;
      flex-shrink: 0;
    }
    .urgent {
      font-size: 12px;
      display: inline-block;
      background-color: red;
      color: #fff;
      width: 18px;
      border-radius: 50%;
      line-height: 18px;
      text-align: center;
      transform: scale(0.82);
    }
  }
</style>
